"use client"

import type React from "react"

import { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Play, ChevronLeft, ChevronRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { usePlayer } from "@/contexts/player-context"
import { toast } from "@/components/ui/use-toast"
import type {Song} from "@/types";

// Define an enum for regions
enum Region {
  Latest = "latest",
  Mainland = "mainland",
  HongKongTaiwan = "hongKongTaiwan",
  Western = "western",
  Korean = "korean",
  Japanese = "japanese",
}

// Define a mapping of region keys to display names
const regionNames: Record<Region, string> = {
  [Region.Latest]: "最新",
  [Region.Mainland]: "内地",
  [Region.HongKongTaiwan]: "港台",
  [Region.Western]: "欧美",
  [Region.Korean]: "韩国",
  [Region.Japanese]: "日本",
}

// 模拟的新歌数据
const newSongs: Record<
  Region,
  Array<{
    id: number
    url: string
    title: string
    artists: string
    duration: number
    cover: string
  }>
> = {
  [Region.Latest]: [
    {
      id: 1,
      url:"123",
      title: "Silent Angel",
      artists: "苏打绿",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 2,
      url:"123",
      title: "UNDEAD (English Version)",
      artists: "YOASOBI (ヨアソビ)",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 3,
      url:"123",
      title: "你手好冷 (feat.汉堡黄)",
      artists: "刘恋/汉堡黄",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 4,
      url:"123",
      title: "致我们的一切 (Surprise)",
      artists: "银河快递 (Galaxy Express)",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 5,
      url:"123",
      title: "受罪 (Live)",
      artists: "王力宏",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 6,
      url:"123",
      title: "权头风《以娱》影视剧片头曲",
      artists: "黄龄",
      duration: 10,
      cover: "/placeholder.svg",
    },
  ],
  [Region.Mainland]: [
    {
      id: 7,
      url:"123",
      title: "我们都在等",
      artists: "李荣浩",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 8,
      url:"123",
      title: "星河万里",
      artists: "王菲",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 9,
      url:"123",
      title: "春天里",
      artists: "张韶涵",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 10,
      url:"123",
      title: "追光者",
      artists: "岑宁儿",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 11,
      url:"123",
      title: "夜曲",
      artists: "周杰伦",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 12,
      url:"123",
      title: "可惜没如果",
      artists: "林俊杰",
      duration: 10,
      cover: "/placeholder.svg",
    },
  ],
  [Region.HongKongTaiwan]: [
    {
      id: 13,
      url:"123",
      title: "光年之外",
      artists: "邓紫棋",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 14,
      url:"123",
      title: "小幸运",
      artists: "田馥甄",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 15,
      url:"123",
      title: "修炼爱情",
      artists: "林俊杰",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 16,
      url:"123",
      title: "红豆",
      artists: "王菲",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 17,
      url:"123",
      title: "暗涌",
      artists: "王菲",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 18,
      url:"123",
      title: "我的歌声里",
      artists: "曲婉婷",
      duration: 10,
      cover: "/placeholder.svg",
    },
  ],
  [Region.Western]: [
    {
      id: 19,
      url:"123",
      title: "Crashing",
      artists: "d4vd/Kali Uchis",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 20,
      url:"123",
      title: "Anti-Hero",
      artists: "Taylor Swift",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 21,
      url:"123",
      title: "As It Was",
      artists: "Harry Styles",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 22,
      url:"123",
      title: "Flowers",
      artists: "Miley Cyrus",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 23,
      url:"123",
      title: "Cruel Summer",
      artists: "Taylor Swift",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 24,
      url:"123",
      title: "vampire",
      artists: "Olivia Rodrigo",
      duration: 10,
      cover: "/placeholder.svg",
    },
  ],
  [Region.Korean]: [
    {
      id: 25,
      url:"123",
      title: "Seven (feat. Latto)",
      artists: "정국",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 26,
      url:"123",
      title: "Cupid - Twin Ver.",
      artists: "FIFTY FIFTY",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 27,
      url:"123",
      title: "Like Crazy",
      artists: "지민",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 28,
      url:"123",
      title: "Ditto",
      artists: "NewJeans",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 29,
      url:"123",
      title: "OMG",
      artists: "NewJeans",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 30,
      url:"123",
      title: "Spicy",
      artists: "aespa",
      duration: 10,
      cover: "/placeholder.svg",
    },
  ],
  [Region.Japanese]: [
    {
      id: 31,
      url:"123",
      title: "アイドル",

      artists: "YOASOBI",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 32,
      url:"123",
      title: "Subtitle",
      artists: "Official髭男dism",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 33,
      url:"123",
      title: "KICK BACK",
      artists: "米津玄師",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 34,
      url:"123",
      title: "群青",
      artists: "YOASOBI",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 35,
      url:"123",
      title: "新時代",
      artists: "Ado",
      duration: 10,
      cover: "/placeholder.svg",
    },
    {
      id: 36,
      url:"123",
      title: "残響散歌",
      artists: "Aimer",
      duration: 10,
      cover: "/placeholder.svg",
    },
  ],
}

export function NewSongsSection() {
  const [selectedRegion, setSelectedRegion] = useState<Region>(Region.Latest)
  const [currentPage, setCurrentPage] = useState(0)
  const songs = newSongs[selectedRegion]
  const totalPages = Math.ceil(songs.length / 3)
  const { playSong, playQueue } = usePlayer()

  const handlePlaySong = (song: any, e: React.MouseEvent) => {
    e.stopPropagation()

    const songToPlay = {
      id: song.id,
      title: song.title,
      artists: song.artists,
      album: song.title,
      duration: song.duration,
      cover: song.cover || "/placeholder.svg",
      url: `/audio/song${song.id}.mp3`,
    }

    playSong(songToPlay)

    toast({
      title: "正在播放",
      description: `${song.title} - ${song.artists}`,
    })
  }

  const handlePlayAll  = () => {
    const songsToPlay: Song[] = songs.map((song) => ({
      id: song.id,
      title: song.title,
      artists: song.artists,
      duration: song.duration,
      cover: song.cover || "/placeholder.svg",
      url: `/audio/song${song.id}.mp3`,
    }))

    playQueue(songsToPlay)

    toast({
      title: "播放全部",
      description: `已添加 ${songs.length} 首歌曲到播放列表`,
    })
  }

  const nextPage = () => {
    setCurrentPage((prev) => (prev + 1) % totalPages)
  }

  const prevPage = () => {
    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages)
  }

  const currentSongs = songs.slice(currentPage * 3, (currentPage + 1) * 3)

  return (
    <div className="relative">
      <div className="flex items-center gap-4 mb-6">
        <Button variant="outline" size="sm" className="h-8 px-4" onClick={handlePlayAll}>
          <Play className="h-3 w-3 mr-1" />
          播放全部
        </Button>
        <Tabs
          value={selectedRegion}
          onValueChange={(value) => {
            setSelectedRegion(value as Region)
            setCurrentPage(0)
          }}
        >
          <TabsList className="bg-transparent border-0 p-0">
            {Object.values(Region).map((region) => (
              <TabsTrigger
                key={region}
                value={region}
                className={cn(
                  "data-[state=active]:bg-transparent data-[state=active]:shadow-none",
                  "px-4 rounded-none border-b-2 border-transparent",
                  selectedRegion === region ? "text-[#31c27c] border-[#31c27c]" : "text-[#999] hover:text-foreground",
                )}
              >
                {regionNames[region]}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
      </div>

      <div className="relative">
        <Button
          variant="ghost"
          size="icon"
          className="absolute -left-12 top-1/2 -translate-y-1/2 h-8 w-8"
          onClick={prevPage}
        >
          <ChevronLeft className="h-4 w-4" />
        </Button>

        <div className="grid grid-cols-3 gap-x-8">
          {currentSongs.map((song) => (
            <div key={song.id} className="flex items-center gap-4 group">
              <div className="relative w-14 h-14 flex-shrink-0">
                <Image src={song.cover || "/placeholder.svg"} alt={song.title} fill className="object-cover" />
                <Button
                  size="icon"
                  variant="secondary"
                  className="absolute inset-0 m-auto h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity bg-black/60 hover:bg-black/60"
                  onClick={(e) => handlePlaySong(song, e)}
                >
                  <Play className="h-3 w-3 text-white" />
                </Button>
              </div>
              <div className="flex-1 min-w-0">
                <h3 className="text-sm truncate group-hover:text-[#31c27c]">{song.title}</h3>
                <p className="text-xs text-[#999] truncate">{song.artists}</p>
              </div>
              <div className="text-xs text-[#999] ml-2">{song.duration}</div>
            </div>
          ))}
        </div>

        <Button
          variant="ghost"
          size="icon"
          className="absolute -right-12 top-1/2 -translate-y-1/2 h-8 w-8"
          onClick={nextPage}
        >
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>

      <div className="flex justify-center gap-1 mt-4">
        {Array.from({ length: totalPages }).map((_, i) => (
          <button
            key={i}
            className={cn(
              "w-1.5 h-1.5 rounded-full transition-colors",
              i === currentPage ? "bg-[#31c27c]" : "bg-[#ddd]",
            )}
            onClick={() => setCurrentPage(i)}
          />
        ))}
      </div>
    </div>
  )
}

